<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				margin: 0px;
				padding: 0px;
			}
			.model {
				min-height: 100px;
				min-width: 100px;
				/* background-color: #0000FF; */
				border: 2px solid #323232;
				border-radius: 4px;
				position: absolute;
				background-color: #fff;
				-webkit-user-select:none;
				     -moz-user-select:none;
				     -ms-user-select:none;
				     user-select:none;
			}
			.tablename:hover{
				/* background-color: #F0F8FF; */
				cursor: move;
			}

			.model .tablename {
				font-size: 13px;
				font-weight: bold;
				border-bottom: 2px solid #323232;
				padding: 2px 3px 3px 2px;
				text-align: center;
			}

			.model .columns {
				padding: 5px;
			}

			.model .columns ul {
				list-style-type: none;
				padding: 0px;
				margin: 0px;
				font-size: 12px;
				font-weight: 500;
			}

			.model .columns ul li {
				text-indent: 5px;
				min-height: 18px;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="2000" height="2000" style="background-color: #CCCCCC;"></canvas>
		<!-- <div id="box" class="model">
			<div class="tablename">
				子公司月度销售金额（不含税）<br />
				DM_SALES_MONTH_AMOUNT
			</div>
			<div class="columns">
				<ul>
					<li>🔑 COMPANY_CODE  -  公司代码</li>
					<li>🔑 COMPANY_NAME  -  公司名称</li>
					<li>COMOPANY_SHORTNAME  -  公司简称</li>
					<li>ACCOUNT_TITLE_CATEGORY  -  科目分类 </li>
					<li>YEAR_MONTH  -  年月</li>
					<li>AMOUNT - 金额</li>
					<li>DAY  -  过账日期</li>
					<li>FISAL_YEAR  -  会计年度</li>
				</ul>
			</div>
		</div> -->
	</body>
</html>
<script src="tableMeta.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var canvas = document.querySelector('#canvas')
	var ctx = canvas.getContext('2d');
	ctx.moveTo(0,0)
	ctx.lineTo(100,100)
	ctx.stroke()

	function group(source) {
		var map = new Map();
		let arr = [];
		for (var i = 0; i < source.length; i++) {
			let t = source[i];
			let table = map.get(t.tableName)
			if (table == null) {
				table = {
					tableName: t.tableName,
					tableComment: t.tableComment,
					columns: []
				};
				map.set(t.tableName, table)
			}
			table.columns.push({
				column: t.columnName,
				primaryKey: t.primaryKey,
				comment: t.columnComment
			});
		}
		
		return map;
	}
	
	/**
	 * 表模型注册表，用于记录表模型的上下文信息
	 * @author lifeifei
	 */
	class TabelModelRegistry{
		constructor() {
		    this.availableX = 0;
			this.availableY = 0;
			this.maxWidth = document.body.clientWidth;
			this.index = 0;
		}
		/**
		 * 向注册表中注册模型，并返回模型该摆放的位置
		 * @param {Object} tableModel  表模型
		 */
		register(tableModel){
			let tmElement = tableModel.toElement();
			let width = tmElement.clientWidth;
			let ifWidth = this.availableX+width+100;
			this.index++;
			if(ifWidth<=this.maxWidth){
				var r ={x:this.availableX,y:this.availableY}
				this.availableX +=width+100;
				return r;
			}else{
				
				//另起一行
				this.availableX=0;
				let y = this.availableY+tmElement.clientHeight+100;
				this.availableY+=(tmElement.clientHeight+100);
				return {x:this.availableX,y:y};
			}
		}
	}
	
	//实例化注册表
	window.tableModelRegistry = new TabelModelRegistry();

	var tableModel = {
		tableName: "DM_SALES_MONTH_AMOUNT",
		tableComment: "子公司月度销售金额（不含税）",
		columns: [{
			column: "id_no",
			comment: "身份证号",
			primaryKey: true
		}, {
			column: "name",
			comment: "姓名",
			primaryKey: false
		}]
	}
	//使用js创建dom
	class Table {
		constructor(tableMeta) {
			this.meta = tableMeta;
			//拼装dom结构
			this.box = this.buildBoxH5();
			this.box.append(this.buildTableNameH5());
			this.box.append(this.buildColumnsH5());
		}

		buildBoxH5() {
			let box = document.createElement("div")
			box.setAttribute("class", "model");
			return box;
		}

		buildColumnsH5() {
			let columns = document.createElement("div")
			columns.setAttribute("class", "columns");
			//构造list
			let ul = document.createElement("ul")
			let length = this.meta.columns.length>10?10:this.meta.columns.length;
			for (var i = 0; i < length; i++) {
				let column = this.meta.columns[i];
				let li = document.createElement("li")
				//连接点
				let cp = new ConnectPoint();
				let comment = column.comment!=null&&column.comment.length>10?column.comment.substring(1,10)+"...":column.comment;
				li.innerHTML = (column.primaryKey?'🔑':'')+column.column + "&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;<span title='"+column.comment+"'>" + comment+"</span>";
				li.appendChild(cp.toElement())
				ul.appendChild(li)
			}
			//超过10个字段的加省略号
			if(this.meta.columns.length>10){
				let li = document.createElement("li")
				li.innerHTML="......";
				li.style.textAlign="center"
				ul.appendChild(li)
			}
			columns.appendChild(ul)
			return columns;
		}
		buildTableNameH5() {
			let tablename = document.createElement("div")
			tablename.setAttribute("class", "tablename");
			let comment = this.meta.tableComment!=null&&this.meta.tableComment.length>10?this.meta.tableComment.substring(1,10)+"...":this.meta.tableComment;
			tablename.innerHTML = this.meta.tableName + "<br/><span title='"+this.meta.tableComment+"'>"+comment+"</span>";
			//注册拖拽事件
			tablename.addEventListener("mousedown", function(event) {
				let self = event.srcElement.parentNode;
				console.log(event.srcElement.parentNode)
				event.target.style.cursor = "move"
				var x = event.pageX - self.offsetLeft;
				var y = event.pageY - self.offsetTop;
				
				//监听移动事件
				document.addEventListener("mousemove", move, false);
			
				function move(event) {
					self.style.left = event.pageX - x + "px";
					self.style.top = event.pageY - y + "px";
				}
				//鼠标松开事件
				self.addEventListener("mouseup", function(event) {
					document.removeEventListener('mousemove', move)
				}, false);
				event.preventDefault();
			
			}, false);
			return tablename;
		}

		toElement() {
			return this.box;
		}
	}
	
	class ConnectPoint{
		constructor() {
		    this.element = document.createElement("span");
			this.element.style.display="inline-block"
			this.element.style.width="7px"
			this.element.style.height="7px";
			this.element.style.border="1px solid #000"
			this.element.style.borderRadius="100%";
			//绑定事件
			this.element.addEventListener("mouseover",function(event){
				event.target.style.cusor="crosshair";
				
			})
			this.element.addEventListener("mousedown", function(event) {
				let self = this;
				event.target.style.cursor = "crosshair"
				window.downX = event.clientX;
				window.downY = event.clientY
				//点击的坐标
				let pointX = event.clientX;
				let pointY = event.clientY;
				
				var x = event.pageX - this.offsetLeft;
				var y = event.pageY - this.offsetTop;
				
				//监听移动事件
				document.addEventListener("mousemove", move, false);
			
				function move(event) {
					self.style.left = event.pageX - x + "px";
					self.style.top = event.pageY - y + "px";
				}
				//鼠标松开事件
				self.addEventListener("mouseup", function(event) {
					//结束画线
					console.log("鼠标松开")
					//开始画线
					ctx.moveTo(window.downX,window.downY)
					ctx.lineTo(event.clientX,event.clientY)
					ctx.stroke()
					document.removeEventListener('mousemove', move)
				}, false);
			
			}, false);
		}
		
		toElement(){
			return this.element;
		}
	}
	
	canvas.addEventListener("mousedown", function(event) {
		let self = this;
		event.target.style.cursor = "crosshair"
		//点击的坐标
		let pointX = event.clientX;
		let pointY = event.clientY;
		//开始画线
		ctx.moveTo(pointX,pointY)
		//监听移动事件
		document.addEventListener("mousemove", move, false);
	
		function move(event) {
		}
		//鼠标松开事件
		self.addEventListener("mouseup", function(event) {
			//结束画线
			console.log("鼠标松开")
			ctx.lineTo(event.clientX,event.clientY)
			ctx.stroke()
			document.removeEventListener('mousemove', move)
		}, false);
	
	}, false);


	var tables = group(tableMetaSource);
	for (var [k,v] of tables) {
		var table = new Table(v);
		let tableElement = table.toElement();
		document.body.appendChild(tableElement);
		//设置初始化位置
		var position = window.tableModelRegistry.register(table);
		// console.log(position)
		tableElement.style.left = position.x+"px";
		tableElement.style.top = position.y+"px";
	};

	// var table = new Table(tableModel);
	// document.body.appendChild(table.toElement());

	// var table2 = new Table(tableModel);
	// document.body.appendChild(table2.toElement());


	// var box = document.getElementById("box");
	// //鼠标按住事件
	// box.addEventListener("mousedown", function(event) {
	// 	let self = this;
	// 	event.target.style.cursor = "move"
	// 	var x = event.pageX - this.offsetLeft;
	// 	var y = event.pageY - this.offsetTop;

	// 	//监听移动事件
	// 	document.addEventListener("mousemove", move, false);

	// 	function move(event) {
	// 		self.style.left = event.pageX - x + "px";
	// 		self.style.top = event.pageY - y + "px";
	// 	}

	// 	//鼠标松开事件
	// 	self.addEventListener("mouseup", function(event) {
	// 		document.removeEventListener('mousemove', move)
	// 	}, false);

	// }, false);
</script>
